<template>
  <a-modal v-model="dialog" top="5vh" title="添加按钮" append-to-body width="600px" @afterClose="cancel">
    <a-table ref="multipleTable" :data-source="buttons" style="width: 100%" @selection-change="handleSelectionChange">
      <a-table-column type="selection" align="center" width="55" />
      <a-table-column data-index="name"  title="名称" align="center" />
      <a-table-column data-index="name" title="编码" align="center" />
    </a-table>
    <div slot="footer" class="dialog-footer">
      <a-button type="text" size="small" @click="cancel">取消</a-button>
      <a-button type="primary" size="small" @click="doSubmit">确认</a-button>
    </div>
  </a-modal>
</template>

<script>
import { buttons } from '../data/buttons'
export default {
  name: 'FlowButton',
  data() {
    return {
      dialog: false,
      buttons,
      multipleSelection: []
    }
  },
  methods: {
    doSubmit() {
      this.$emit('callback', this.multipleSelection)
      this.cancel()
    },
    cancel() {
      this.multipleSelection = []
      this.$refs.multipleTable.clearSelection()
      this.dialog = false
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style scoped>

</style>
